<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./css/semantic.min.css">
    <link rel="stylesheet" href="./css/self.css">
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand self-padding-first-border"><img src="./img/TimberBlog.svg" width="150px" height="30px"></img></a>
    <button class="navbar-toggler" id="indexBtn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <!--            主页-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="index.html">
                    <i class="fa fa-home"></i>主页
                    <!--                    <span class="sr-only">(current)</span>-->
                </a>
            </li>
            <!--            分类-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="type.html">
                    <i class="fa fa-folder-open"></i>分类
                </a>
            </li>
            <!--标签-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="http://localhost:8088/demo/label.html">
                    <i class="fa fa-bookmark"></i>标签
                </a>
            </li>

            <!--            时间轴-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="timetable.html">
                    <i class="fa fa-calendar"></i>时间轴
                </a>
            </li>
        </ul>
        <!--        搜索按钮-->
        <form class="form-inline my-2 my-lg-0  self-padding-search-border">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="selfInf.html">
                    <i class="fa fa-user"></i>个人中心
                </a>
            </li>
            <!--编写文章-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="editor.html">
                    <i class="fa fa-keyboard-o"></i>文章编辑
                </a>
            </li>
        </ul>
    </div>
</nav>
<br><br><br>
<div class="ui attached menu">
    <div class="ui container">
        <div class="right menu">
            <a href="selfZone.html" class="item">个人空间</a>
            <a href="#" class="active teal item">我的信息</a>
        </div>
    </div>
</div>
<br><br><br>
<div id="main">
    <form id="form" class="ui container form">
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">账号：</label>
            <div class="col-8">
                <input type="text" name="loginName" class="form-control" placeholder="用户登录账号">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">密码：</label>
            <div class="col-8">
                <input type="password" name="loginPwd" class="form-control" placeholder="用户登录密码">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">性别：</label>
            <div class="col-8">
                <select name="userSex" class="form-control">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">姓名：</label>
            <div class="col-8">
                <input type="text" name="userName" class="form-control"
                       placeholder="用户真实姓名">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">邮箱：</label>
            <div class="col-8">
                <input type="text" class="form-control" name="userEmail" placeholder="验证邮箱">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">生日：</label>
            <div class="col-8">
                <input type="date" name="userBirthday" placeholder="请选择生日" class="form-control">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">工作状况：</label>
            <div class="col-8">
                <select name="userWork" class="form-control">
                    <option value="1">学生</option>
                    <option value="2">已工作</option>
                    <option value="3">未工作</option>
                    <option value="4">其他</option>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group row">
            <label class="col-form-label col-2"></label>
            <div class="col-8">
                <button type="button" id="btnReg" class="ui teal basic button">提交</button>
                <button type="reset" class="ui red basic button">重置</button>
            </div>
        </div>
    </form>
</div>

<!---->        <div>-->
    <!--            <br><br><br><br><br><br><br><br><br><br><br><br><br>-->
    <!--            <br><br><br><br><br><br><br><br><br><br><br><br><br>-->
    <!--            <br><br><br><br><br><br><br><br><br><br><br><br><br>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>



    <!--底部-->
<footer>
    <div class="container">
        <br>
        <h6 class="text-center" style="color:white;font-family:'Microsoft YaHei UI'">Copyright © 2021 By TimberBlog</h6>
    </div>
</footer>
</body>

<!--jQuery引入-->
<script src="jquery/jquery-3.6.0.min.js"></script>
<script>
    jQuery(function () {
        jQuery("#btnReg").click(function () {
            //获取页面中控件数据

            let form=jQuery("#form").serialize();
            //向服务器发送请求，获取响应结果
            //rst:服务器返回的数据
            jQuery.post("user/reg",form,function (rst) {
                if(rst>0){alert("提交成功")}
                else{alert("提交失败")}
            });
        })
    })
</script>
<!--semantic ui-->
<script src="js/semantic.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
</html>